{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "4e2a9393-7767-488e-a8bf-27c12dca35bd",
   "metadata": {},
   "outputs": [],
   "source": [
    "# imports\n",
    "\n",
    "import os\n",
    "from dotenv import load_dotenv\n",
    "from scraper import fetch_website_contents\n",
    "from IPython.display import Markdown, display\n",
    "from groq import Groq\n",
    "\n",
    "# If you get an error running this cell, then please head over to the troubleshooting notebook!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "7b87cadb-d513-4303-baee-a37b6f938e4d",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "API key found and looks good so far!\n"
     ]
    }
   ],
   "source": [
    "# Load environment variables in a file called .env\n",
    "\n",
    "load_dotenv(override=True)\n",
    "api_key = os.getenv('GROQ_API_KEY')\n",
    "\n",
    "# Check the key\n",
    "\n",
    "if not api_key:\n",
    "    print(\"No API key was found - please head over to the troubleshooting notebook in this folder to identify & fix!\")\n",
    "elif api_key.strip() != api_key:\n",
    "    print(\"An API key was found, but it looks like it might have space or tab characters at the start or end - please remove them - see troubleshooting notebook\")\n",
    "else:\n",
    "    print(\"API key found and looks good so far!\")\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "a58394bf-1e45-46af-9bfd-01e24da6f49a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[{'role': 'user',\n",
       "  'content': 'Hello, Groq! This is my first ever message to you! Hi!'}]"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# To give you a preview -- calling groq with these messages is this easy. Any problems, head over to the Troubleshooting notebook.\n",
    "\n",
    "message = \"Hello, Groq! This is my first ever message to you! Hi!\"\n",
    "\n",
    "messages = [{\"role\": \"user\", \"content\": message}]\n",
    "\n",
    "messages\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "08330159",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "2 + 2 = 4.\n"
     ]
    }
   ],
   "source": [
    "groqcall = Groq()\n",
    "\n",
    "response = groqcall.chat.completions.create(model=\"openai/gpt-oss-20b\", \n",
    "                                            messages=[{\"role\":\"user\", \"content\": \"what is 2+2?\"}],\n",
    "                                            reasoning_effort=\"medium\")\n",
    "\n",
    "print(response.choices[0].message.content)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "2ef960cf-6dc2-4cda-afb3-b38be12f4c97",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Gradio\n",
      "\n",
      "New\n",
      "Gradio 6 is here!\n",
      "Learn more\n",
      "Update\n",
      "Hackathon deadline approaching\n",
      "Submit now\n",
      "Build machine learning apps in Python\n",
      "Create web interfaces for your ML models in minutes. Deploy anywhere,\n",
      "\t\t\tshare with anyone.\n",
      "Get Started\n",
      "GitHub\n",
      "40752\n",
      "Click Me\n",
      "Button\n",
      "0\n",
      "5\n",
      "10\n",
      "15\n",
      "Plot\n",
      "A\n",
      "B\n",
      "C\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "Dataframe\n",
      "◢\n",
      "◢\n",
      "ImageSlider\n",
      "0\n",
      "100\n",
      "Slider\n",
      "Gallery\n",
      "Accept terms\n",
      "Checkbox\n",
      "1\n",
      "2\n",
      "3\n",
      "def\n",
      "hello\n",
      "():\n",
      "print\n",
      "(\n",
      "\"Hi\"\n",
      ")\n",
      "return\n",
      "42\n",
      "Code\n",
      "Click Me\n",
      "Button\n",
      "0\n",
      "5\n",
      "10\n",
      "15\n",
      "Plot\n",
      "A\n",
      "B\n",
      "C\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "···\n",
      "Dataframe\n",
      "◢\n",
      "◢\n",
      "ImageSlider\n",
      "0\n",
      "100\n",
      "Slider\n",
      "Gallery\n",
      "Accept terms\n",
      "Checkbox\n",
      "1\n",
      "2\n",
      "3\n",
      "def\n",
      "hello\n",
      "():\n",
      "print\n",
      "(\n",
      "\"Hi\"\n",
      ")\n",
      "return\n",
      "42\n",
      "Code\n",
      "Hi! How can I help?\n",
      "Hello!\n",
      "👋\n",
      "Chatbot\n",
      "Good\n",
      "sentiment\n",
      "bad\n",
      "HighlightedText\n",
      "Model3D\n",
      "Option 1\n",
      "Option 2\n",
      "Radio\n",
      "Number\n",
      "📁\n",
      "Documents\n",
      "📄\n",
      "file.txt\n",
      "📁\n",
      "Images\n",
      "FileExplorer\n",
      "⋮⋮\n",
      "Item 1\n",
      "⋮⋮\n",
      "Item 2\n",
      "⋮⋮\n",
      "Item 3\n",
      "Draggable\n",
      "▶\n",
      "0:15\n",
      "Audio\n",
      "Face\n",
      "Ear\n",
      "AnnotatedImage\n",
      "Option A\n",
      "Dropdown\n",
      "DateTime\n",
      "Hi! How can I help?\n",
      "Hello!\n",
      "👋\n",
      "Chatbot\n",
      "Good\n",
      "sentiment\n",
      "bad\n",
      "HighlightedText\n",
      "Model3D\n",
      "Option 1\n",
      "Option 2\n",
      "Radio\n",
      "Number\n",
      "📁\n",
      "Documents\n",
      "📄\n",
      "file.txt\n",
      "📁\n",
      "Images\n",
      "FileExplorer\n",
      "⋮⋮\n",
      "Item 1\n",
      "⋮⋮\n",
      "Item 2\n",
      "⋮⋮\n",
      "Item 3\n",
      "Draggable\n",
      "▶\n",
      "0:15\n",
      "Audio\n",
      "Face\n",
      "Ear\n",
      "AnnotatedImage\n",
      "Option A\n",
      "Dropdown\n",
      "DateTime\n",
      "Everything you need to build\n",
      "Gradio handles the frontend so you can focus on building. From prototypes\n",
      "\t\t\tto production-ready web apps.\n",
      "Lightning Fast Setup\n",
      "One command to install. A few lines of Python to launch. No\n",
      "\t\t\t\t\t\tJavascript, CSS, or frontend experience required.\n",
      "$\n",
      "pip install gradio\n",
      "Successfully installed gradio\n",
      "$\n",
      "python app.py\n",
      "Running on http://127.0.0.1:7860\n",
      "40+ Components\n",
      "Input and output for any data type: Images, Audio, Video, 3D,\n",
      "\t\t\t\t\tDataframes, and more.\n",
      "Audio\n",
      "Image\n",
      "Chat\n",
      "Video\n",
      "Plot\n",
      "JSON\n",
      "+ many more\n",
      "Permanent Hosting\n",
      "Deploy to Hugging Face Spaces for free. Always online, auto-scaling,\n",
      "\t\t\t\t\tand shareable with a simple URL.\n",
      "Live on HF Spaces\n",
      "Share Instantly\n",
      "Create a public link to your machine learning demo running on your\n",
      "\t\t\t\t\t\tlocal computer in seconds. Great for showing clients or colleagues.\n",
      "demo.\n"
     ]
    }
   ],
   "source": [
    "# Let's try out this utility\n",
    "\n",
    "gradio = fetch_website_contents(\"https://www.gradio.app\")\n",
    "print(gradio)  # print first 500 characters"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "abdb8417-c5dc-44bc-9bee-2e059d162699",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define our system prompt - you can experiment with this later, changing the last sentence to 'Respond in markdown in Spanish.\"\n",
    "\n",
    "system_prompt = \"\"\"\n",
    "You are a snarky assistant that analyzes the contents of a website,\n",
    "and provides a short, snarky, humorous summary, ignoring text that might be navigation related.\n",
    "Respond in markdown. Do not wrap the markdown in a code block - respond just with the markdown.\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "f0275b1b-7cfe-4f9d-abfa-7650d378da0c",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define our user prompt\n",
    "\n",
    "user_prompt_prefix = \"\"\"\n",
    "Here are the contents of a website.\n",
    "Provide a short summary of this website.\n",
    "If it includes news or announcements, then summarize these too.\n",
    "\n",
    "\"\"\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "f25dcd35-0cd0-4235-9f64-ac37ed9eaaa5",
   "metadata": {},
   "outputs": [],
   "source": [
    "messages = [\n",
    "    {\"role\": \"system\", \"content\": \"You are a helpful assistant\"},\n",
    "    {\"role\": \"user\", \"content\": \"What is 2 + 2?\"}\n",
    "]\n",
    "\n",
    "response = groqcall.chat.completions.create(model=\"openai/gpt-oss-20b\", \n",
    "                                            messages=messages,\n",
    "                                            reasoning_effort=\"medium\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "2339e21e",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "4\n"
     ]
    }
   ],
   "source": [
    "print(response.choices[0].message.content)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "0134dfa4-8299-48b5-b444-f2a8c3403c88",
   "metadata": {},
   "outputs": [],
   "source": [
    "# See how this function creates exactly the format above\n",
    "\n",
    "def messages_for(website):\n",
    "    return [\n",
    "        {\"role\": \"system\", \"content\": system_prompt},\n",
    "        {\"role\": \"user\", \"content\": user_prompt_prefix + website}\n",
    "    ]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "36478464-39ee-485c-9f3f-6a4e458dbc9c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[{'role': 'system',\n",
       "  'content': '\\nYou are a snarky assistant that analyzes the contents of a website,\\nand provides a short, snarky, humorous summary, ignoring text that might be navigation related.\\nRespond in markdown. Do not wrap the markdown in a code block - respond just with the markdown.\\n'},\n",
       " {'role': 'user',\n",
       "  'content': '\\nHere are the contents of a website.\\nProvide a short summary of this website.\\nIf it includes news or announcements, then summarize these too.\\n\\nGradio\\n\\nNew\\nGradio 6 is here!\\nLearn more\\nUpdate\\nHackathon deadline approaching\\nSubmit now\\nBuild machine learning apps in Python\\nCreate web interfaces for your ML models in minutes. Deploy anywhere,\\n\\t\\t\\tshare with anyone.\\nGet Started\\nGitHub\\n40752\\nClick Me\\nButton\\n0\\n5\\n10\\n15\\nPlot\\nA\\nB\\nC\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\nDataframe\\n◢\\n◢\\nImageSlider\\n0\\n100\\nSlider\\nGallery\\nAccept terms\\nCheckbox\\n1\\n2\\n3\\ndef\\nhello\\n():\\nprint\\n(\\n\"Hi\"\\n)\\nreturn\\n42\\nCode\\nClick Me\\nButton\\n0\\n5\\n10\\n15\\nPlot\\nA\\nB\\nC\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\n···\\nDataframe\\n◢\\n◢\\nImageSlider\\n0\\n100\\nSlider\\nGallery\\nAccept terms\\nCheckbox\\n1\\n2\\n3\\ndef\\nhello\\n():\\nprint\\n(\\n\"Hi\"\\n)\\nreturn\\n42\\nCode\\nHi! How can I help?\\nHello!\\n👋\\nChatbot\\nGood\\nsentiment\\nbad\\nHighlightedText\\nModel3D\\nOption 1\\nOption 2\\nRadio\\nNumber\\n📁\\nDocuments\\n📄\\nfile.txt\\n📁\\nImages\\nFileExplorer\\n⋮⋮\\nItem 1\\n⋮⋮\\nItem 2\\n⋮⋮\\nItem 3\\nDraggable\\n▶\\n0:15\\nAudio\\nFace\\nEar\\nAnnotatedImage\\nOption A\\nDropdown\\nDateTime\\nHi! How can I help?\\nHello!\\n👋\\nChatbot\\nGood\\nsentiment\\nbad\\nHighlightedText\\nModel3D\\nOption 1\\nOption 2\\nRadio\\nNumber\\n📁\\nDocuments\\n📄\\nfile.txt\\n📁\\nImages\\nFileExplorer\\n⋮⋮\\nItem 1\\n⋮⋮\\nItem 2\\n⋮⋮\\nItem 3\\nDraggable\\n▶\\n0:15\\nAudio\\nFace\\nEar\\nAnnotatedImage\\nOption A\\nDropdown\\nDateTime\\nEverything you need to build\\nGradio handles the frontend so you can focus on building. From prototypes\\n\\t\\t\\tto production-ready web apps.\\nLightning Fast Setup\\nOne command to install. A few lines of Python to launch. No\\n\\t\\t\\t\\t\\t\\tJavascript, CSS, or frontend experience required.\\n$\\npip install gradio\\nSuccessfully installed gradio\\n$\\npython app.py\\nRunning on http://127.0.0.1:7860\\n40+ Components\\nInput and output for any data type: Images, Audio, Video, 3D,\\n\\t\\t\\t\\t\\tDataframes, and more.\\nAudio\\nImage\\nChat\\nVideo\\nPlot\\nJSON\\n+ many more\\nPermanent Hosting\\nDeploy to Hugging Face Spaces for free. Always online, auto-scaling,\\n\\t\\t\\t\\t\\tand shareable with a simple URL.\\nLive on HF Spaces\\nShare Instantly\\nCreate a public link to your machine learning demo running on your\\n\\t\\t\\t\\t\\t\\tlocal computer in seconds. Great for showing clients or colleagues.\\ndemo.'}]"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# Try this out, and then try for a few more websites\n",
    "\n",
    "messages_for(gradio)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "905b9919-aba7-45b5-ae65-81b3d1d78e34",
   "metadata": {},
   "outputs": [],
   "source": [
    "# And now: call the Groq API. You will get very familiar with this!\n",
    "\n",
    "def summarize(url):\n",
    "    website = fetch_website_contents(url)\n",
    "    response = groqcall.chat.completions.create(\n",
    "        model=\"openai/gpt-oss-20b\",\n",
    "        messages=messages_for(website),\n",
    "        reasoning_effort=\"medium\"\n",
    "        )\n",
    "    return response.choices[0].message.content"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "05e38d41-dfa4-4b20-9c96-c46ea75d9fb5",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "'## Gradio: Because Your ML Model Deserves a Fancy Home\\n\\n- **New release alert** – Gradio\\u202f6 just landed, so you can finally brag about “the newest” in your inbox.  \\n- **Hackathon deadline** – There’s a looming submission deadline, so grab a coffee, code fast, and hope the judges don’t mind your caffeine‑induced bugs.  \\n- **What it does** – Turns any Python ML model into a slick web app with zero JavaScript. One pip command, a single script, and boom: `http://127.0.0.1:7860`.  \\n- **Components galore** – Images, audio, 3D, dataframes, even a tiny chatbot that probably knows nothing about your data.  \\n- **Hosting** – “Permanent hosting” on Hugging Face Spaces for free, because we all love paying for bandwidth we never use.  \\n- **Sharing** – Get a public link in seconds—perfect for impressing your boss who probably doesn’t care about your model.  \\n\\nBottom line: Gradio is the lazy developer’s dream—just paste your code, deploy, and pretend you actually built the UI.'"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "summarize(\"https://www.gradio.app\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "3d926d59-450e-4609-92ba-2d6f244f1342",
   "metadata": {},
   "outputs": [],
   "source": [
    "# A function to display this nicely in the output, using markdown\n",
    "\n",
    "def display_summary(url):\n",
    "    summary = summarize(url)\n",
    "    display(Markdown(summary))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "id": "3018853a-445f-41ff-9560-d925d1774b2f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "# Gradio: The “Make Your ML Models Public” Fandom\n",
       "\n",
       "- **Gradio 6 just landed** – because apparently version 5 was *so* last year.  \n",
       "- **Hackathon deadline is looming** – submit your project before your coffee runs out.  \n",
       "- **One‑click Python magic** – install with `pip install gradio`, run `python app.py`, and voilà, a shiny web UI appears at `127.0.0.1:7860`.  \n",
       "- **Component buffet** – images, audio, video, 3D, plots, dataframes… basically anything you can put on a screen.  \n",
       "- **Free hosting on Hugging Face Spaces** – your demo stays online forever, auto‑scales, and comes with a URL that looks like a meme.  \n",
       "\n",
       "Bottom line: If you want to turn your ML code into a pretty front‑end without learning any CSS, Gradio is the *lazy coder’s* dream."
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "display_summary(\"https://www.gradio.app\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f4484fcf-8b39-4c3f-9674-37970ed71988",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "llm-engineering",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
